<template>
  <a-card :bordered="false">
    <template v-if="departId">
      <a-form>
        <a-form-item label="所拥有的权限">
          <tree
            style="height:500px;overflow: auto;"
            checkable
            multiple
            :selectedKeys="selectedKeys"
            :treeData="treeData"
            :checkStrictly="checkStrictly"
            :checkedKeys="checkedKeys"
            :expandedKeys="expandedKeys"
            @check="onCheck"
            @expand="onExpand"
            @select="onTreeNodeSelect"
          >
            <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
              {{ slotTitle }}
              <a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
            </span>
          </tree>
        </a-form-item>
      </a-form>
      <div class="anty-form-btn">
        <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="switchCheckStrictly(false)">父子关联</a-menu-item>
            <a-menu-item key="2" @click="switchCheckStrictly(true)">取消关联</a-menu-item>
            <a-menu-item key="3" @click="checkAll">全部勾选</a-menu-item>
            <a-menu-item key="4" @click="cancelCheckAll">取消全选</a-menu-item>
            <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
            <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
          </a-menu>
          <a-button>
            树操作 <a-icon type="up" />
          </a-button>
        </a-dropdown>
        <a-button style="float: right" type="primary" @click="handleSubmit" htmlType="button" icon="form">保存</a-button>
      </div>
    </template>
    <div v-else style="height:330px;">
      <h3>请先选择一个部门!</h3>
    </div>

    <depart-data-rule-modal ref="departDataRule"></depart-data-rule-modal>
  </a-card>
</template>

<script>
import { Tree } from 'ant-design-vue'
import DepartDataRuleModal from './DepartDataRuleModal'
import { apiQueryTreeListForRole, apiQueryDepartPermission, apiSaveDepartPermission } from '@/api/system'

export default {
  name: 'DepartPermissionForm',
  components: {
    Tree, DepartDataRuleModal
  },
  props: {
    departId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      treeData: [],
      defaultCheckedKeys: [],
      /** 树操作变量 start **/
      selectedKeys: [],
      expandedKeysss: [],
      allTreeKeys: [],
      checkStrictly: true,
      checkedKeys: [],
      expandedKeys: []
      /** 树操作变量 end **/
    }
  },
  watch: {
    departId (val) {
      console.log(val)
      this.loadDepartPermission()
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    loadData () {
      apiQueryTreeListForRole().then((res) => {
        this.treeData = res.result.treeList
        this.allTreeKeys = res.result.ids
        if (this.departId) {
          this.loadDepartPermission()
        }
        // apiQueryRolePermission({ roleId: this.roleId }).then((res) => {
        //   this.checkedKeys = res.result
        //   this.defaultCheckedKeys = res.result
        //   this.expandedKeys = this.allTreeKeys
        // })
      })
    },
    loadDepartPermission () {
      apiQueryDepartPermission({ departId: this.departId }).then(res => {
        this.checkedKeys = res.result
        this.defaultCheckedKeys = res.result
        this.expandedKeys = this.allTreeKeys
      })
    },
    handleSubmit () {
      if (!this.departId) {
        this.$message.warning('请点击选择一个部门!')
      }
      const params = {
        departId: this.departId,
        permissionIds: this.checkedKeys.join(','),
        lastpermissionIds: this.defaultCheckedKeys.join(',')
      }
      console.log(params)
      apiSaveDepartPermission(params).then(res => {
        console.log(res)
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /** 树操作 **/
    onTreeNodeSelect (id) {
      if (id && id.length > 0) {
        this.selectedKeys = id
      }
      this.$refs.departDataRule.show(this.selectedKeys[0], this.departId)
    },
    onCheck (o) {
      console.log(o)
      if (this.checkStrictly) {
        this.checkedKeys = o.checked
      } else {
        this.checkedKeys = o
      }
    },
    // 父子关联/取消
    switchCheckStrictly (v) {
      this.checkStrictly = v
    },
    // 全部勾选
    checkAll () {
      this.checkedKeys = this.allTreeKeys
    },
    // 取消全选
    cancelCheckAll () {
      this.checkedKeys = []
    },
    // 展开所有
    expandAll () {
      this.expandedKeys = this.allTreeKeys
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
    },
    // 合并所有
    closeAll () {
      this.expandedKeys = []
    }
  }
}
</script>

<style scoped>

</style>
